<template>
    <div class="InvitationCode" :style="'min-height: ' + docheight + 'px'">
      <div v-if="!showTimeOut">
        <div class="codeUserCont">
          <div class="codeUserTitle">
            <div>会员充值记录({{ total_money }}元)</div>
            <div class="timeBtn">
              <span v-if="startDate && endDate">
                <span @click="showDate = true"
                  >{{ startDate }}～{{ endDate }}</span
                >
                <span style="color:#e95551" @click="czTime">重置日期</span>
              </span>
              <span v-else
                >订单日期:<span @click="showDate = true" style="color:#e95551"
                  >未选择</span
                ></span
              >
            </div>
          </div>
          <div class="codeUserList">
            <div class="codeUserItem" :key="index" v-for="(item,index) in integalArr">
                <div class="listNum">订单单号：{{ item.order_number }}</div>
                <div class="subMoney">
                    <img :src="item.head_img+ossSrc" />
                    <div class="carLeft">
                        <div class="userName">
                            <span>{{ item.nick_name }}</span>  
                        </div>
                        <div class="userTime">{{ item.create_time }}</div>
                    </div>
                    <div class="integralNum greenNum">+{{ item.money }}</div>
                </div>
            </div>
            <div class="loadMore" v-if="integalArr.length>0">{{ loadMoreText }}</div>
            <nodata v-if="integalArr.length==0" text="暂无会员充值记录"></nodata>
          </div>
        </div>
        <sub-load v-if="showLoad"></sub-load>
      </div>
      <van-calendar
        ref="calend"
        :min-date="minDate"
        :max-date="maxDate"
        color="#e95551"
        v-model:show="showDate"
        type="range"
        @confirm="onConfirm"
      />
      <toast
        v-model="showToast"
        position="middle"
        width="50%"
        type="text"
        :time="1000"
        >{{ showText }}
      </toast>
      <getLoad v-if="!showCont"></getLoad>
      <getTimeOut v-if="showTimeOut"></getTimeOut>
    </div>
  </template>
  
  <script>
  import { Toast } from "vux";
  import SaveBtn from "@/components/public/saveBtn.vue";
  import subLoad from "@/components/public/subLoad.vue";
  import getLoad from "@/components/public/getLoad";
  import nodata from '@/components/public/nodata'

  import getTimeOut from "@/components/public/getTimeOut";
  import footcpm from "@/components/footcpm";
  import { user_member_record } from "@/http/api";
  export default {
    components: { nodata,getTimeOut, getLoad, subLoad, Toast, SaveBtn, footcpm },
    data() {
      return {
        showTimeOut: false,
        showCont: true,
        showLoad: false,
        showText: "",
        showToast: false,
        showDate: false,
        integalArr: [],
        minDate: new Date(2022, 0, 1),
        maxDate: new Date(),
        startDate: "",
        endDate: "",
  
        page: 1,
        per_page: 10,
        last_page: 0,
        getting: false,
        loadMoreText:'数据加载中~',
        total_money:0,

      };
    },
    props: {},
    methods: {
      getTimeStr(time) {
        let n = time.getFullYear();
        let y = time.getMonth() + 1;
        let d = time.getDate();
        let timeStr = n + "-" + y + "-" + d;
        return timeStr;
      },
      czTime() {
        this.endDate = "";
        this.startDate = "";
        this.page = 1;
        this.last_page = 0;
        this.integalArr = [];
        this.$refs.calend.reset();
        this.getData();
      },
      onConfirm(values) {
        const [start, end] = values;
        this.startDate = this.getTimeStr(values[0]);
        this.endDate = this.getTimeStr(values[1]);
        this.showDate = false;
        this.integalArr = [];
        this.page = 1;
        this.last_page = 0;
        this.getData();
      },
      getData() {
        let time = "";
        if (this.startDate != "" && this.endDate != "") {
          time = this.startDate + "," + this.endDate;
        }
        let data = {
          page: this.page,
          per_page: this.per_page,
          time: time
        };
        user_member_record(data)
          .then(res => {
            this.showCont = true;
            if (res.data.code == 1) {
              let arr = res.data.data.data.data
              this.total_money = res.data.data.total_money
                for(let i=0;i<arr.length;i++){
                  this.integalArr.push(arr[i])
                }
                setTimeout(() => {
                  this.getting = false
                }, 100);
                this.last_page = res.data.data.data.last_page
                if(this.page==this.last_page){
                  this.loadMoreText = '到底啦～'
                }else{
                  this.loadMoreText = '数据加载中~'
                }
            } else {
              this.showToast = true;
              this.showText = "数据获取失败";
            }
          })
          .catch(() => {
            this.showTimeOut = true;
            this.showCont = true;
          });
      },
      nextfn() {
        if (this.$route.path == "/record") {
          let h =
            document.documentElement.scrollHeight || document.body.scrollHeight;
          let wh =
            document.documentElement.clientHeight || document.body.clientHeight;
          let top = document.documentElement.scrollTop || document.body.scrollTop;
          let bottom = h - wh - top;
          if (bottom <= 50) {
            if (this.getting == false) {
              if (this.last_page > this.page) {
                this.getting = true;
                this.page++;
                this.getData();
              }
            }
          }
        }
      }
    },
    mounted() {
      window.addEventListener("scroll", this.nextfn);
    },
    created() {
      this.getData();
    }
  };
  </script>
  
  <style scoped lang="less">
  .InvitationCode {
    width: 100%;
    background-color: #f9f1f1;
    box-sizing: border-box;
    padding-bottom: 1.5rem;
    padding-top: 1rem;
    .codeUserCont {
      width: 92%;
      margin: 0 auto;
      background-color: #fff;
      padding: 0.75rem;
      box-sizing: border-box;
      border-radius: 0.25rem;
      .carTop{
        width: 100%;
        text-align: center;
        padding: 0.5rem 0;
        .carName{
          font-weight: bold;
          font-size: 0.8rem;
        }
        .carMoney{
          color: #e95551;
          font-size: 1.2rem;
        }
      }
      .codeUserTitle {
        font-size: 0.8rem;
        font-weight: bold;
        padding: 0.75rem 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .timeBtn {
          font-weight: normal;
          font-size: 0.65rem;
        }
      }
      .codeUserList {
        padding: 0.75rem 0;
        .codeUserItem{
              width: 100%;
            //   display: flex;
              padding: 0.5rem 0;
            //   align-items: center;
              border-top: 1px dashed #ebebeb;
              
              .listNum{
                    width: 100%;
                    color: #e95551;
                    padding-bottom: 0.5rem;
                    font-size: 0.6rem;
                    display: flex;
                    justify-content: space-between;
                    .blueText{
                        // color: #4fc763;
                    }
                    .greenText{
                        color: #85CE61;
                    }
                    .redText{
                        color: #F56C6C;
                    }
                }
              .subMoney{
                  width: 100%;
                  display: flex;
                //   justify-content: space-between;
                  align-items: center;
                  img{
                    width: 2.5rem;
                    border-radius: 50%;
                  }
                  .carLeft{
                    flex: 1;
                    width: 1rem;
                    margin: 0 0.75rem;
                    .userName{
                        font-size: 0.7rem;
                        font-weight: bold;
                        color: #333;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        width: 100%;
                        .desTag{
                            color: #4fc763;
                        }
                    }
                    .userTime{
                        font-size: 0.6rem;
                        margin-top: 0.25rem;
                        color: #666;
                        .redText{
                            color:#F56C6C;
                        }
                    }
                  }
                  .integralNum{
                        color: #4fc763;
                        font-size: 1rem;
                    }
                    .greenNum{
                        color: #85CE61;
                    }
                    .redNum{
                        color:#F56C6C;
                    }
              }
          }
        .loadMore{
          text-align: center;
          padding: 0.75rem 0;
          font-size: 0.6rem;
          color: #e95551;
        }
      }
    }
  }
  </style>
  <style>
  .InvitationCode .van-cell::after {
    border-bottom: none;
  }
  </style>
  